<template>
    <view class="he-mask" hover-stop-propagation :style="[maskStyle, zoomStyle]" @tap="click" @touchmove.stop.prevent="() => {}" :class="{
		'he-mask-zoom': zoom,
		'he-mask-show': show
	}">
        <slot />
    </view>
</template>

<script>
/**
 * mask 遮罩
 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
 * @property {Boolean} show 是否显示遮罩（默认false）
 * @property {String Number} z-index z-index 层级（默认1070）
 * @property {Object} custom-style 自定义样式对象，见上方说明
 * @property {String Number} duration 动画时长，单位毫秒（默认300）
 * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
 * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
 * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
 * @example <he-mask :show="show" @click="show = false"></he-mask>
 */
export default {
    name: "he-mask",
    props: {
        // 是否显示遮罩
        show: {
            type: Boolean,
            default: false
        },
        // 层级z-index
        zIndex: {
            type: [Number, String],
            default: ''
        },
        // 用户自定义样式
        customStyle: {
            type: Object,
            default () {
                return {}
            }
        },
        // 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
        zoom: {
            type: Boolean,
            default: true
        },
        // 遮罩的过渡时间，单位为ms
        duration: {
            type: [Number, String],
            default: 300
        },
        // 是否可以通过点击遮罩进行关闭
        maskClickAble: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            zoomStyle: {
                transform: ''
            },
            scale: 'scale(1.2, 1.2)'
        }
    },
    watch: {
        show(n) {
            if(n && this.zoom) {
                // 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
                this.zoomStyle.transform = 'scale(1, 1)';
            } else if(!n && this.zoom) {
                // 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
                this.zoomStyle.transform = this.scale;
            }
        }
    },
    computed: {
        maskStyle() {
            let style = {};
            style.backgroundColor = "rgba(0, 0, 0, 0.6)";
            if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
            else style.zIndex = -1;
            style.transition = `all ${this.duration / 1000}s ease-in-out`;
            // 判断用户传递的对象是否为空，不为空就进行合并
            if (Object.keys(this.customStyle).length) style = {
                ...style,
                ...this.customStyle
            };
            return style;
        }
    },
    methods: {
        click() {
            if (!this.maskClickAble) return;
            this.$emit('click');
        }
    }
}
</script>

<style scoped>

.he-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: transform 0.3s;
}

.he-mask-show {
    opacity: 1;
}

.he-mask-zoom {
    transform: scale(1.2, 1.2);
}
</style>
